<template>
  <div>
    <i-page-header class="product_tabs" title="闭店商户管理"> </i-page-header>

    <Card :bordered="false" dis-hover class="ivu-mt">
      <Form ref="formValidate" :model="formValidate">
        <div class="search-inner">
          <div class="fx-r fx-bc">
            <div class="label">商户信息:</div>
            <div style="width: 160px" class="value">
              <el-input
                v-model="formValidate.title"
                placeholder="请输入商户信息"
              />
            </div>

            <div class="label">联系电话:</div>
            <div style="width: 160px" class="value">
              <el-input
                v-model="formValidate.tel"
                placeholder="请输入联系电话"
              />
            </div>

            <div class="label">规模类型:</div>
            <div style="width: 160px" class="value">
              <el-select
                v-model="formValidate.type_scale"
                clearable
                placeholder="规模类型"
                style="width: 100%"
              >
                <el-option label="大型" value="大型"></el-option>
                <el-option label="中型" value="中型"></el-option>
                <el-option label="小型" value="小型"></el-option>
              </el-select>
            </div>
            <div class="label">商户地址:</div>
            <div style="width: 160px" class="value">
              <el-input
                v-model="formValidate.address"
                placeholder="请输入商户地址"
              />
            </div>

            <div class="label">闭店时间:</div>
            <div style="width: 210px" class="value">
              <DatePicker
                v-model="formValidate.timeVal"
                format="yyyy/MM/dd"
                type="datetimerange"
                placement="bottom-start"
                placeholder="自定义时间"
                style="width: 210px"
                class="mr20"
              ></DatePicker>
            </div>
            <!-- </FormItem> -->

            <div class="value">
              <el-button
                @click="userSearchs"
                type="primary"
                icon="el-icon-zoom-in"
                >搜索</el-button
              >
            </div>

            <div class="fx-g1"></div>
            <!--<el-button @click="exports"  icon="el-icon-connection">导出XLS</el-button>-->
          </div>
        </div>
      </Form>
    </Card>
 

    <Table
      :columns="columns1"
      :data="tableData"
      class="mt25"
      no-userFrom-text="暂无数据"
      @on-selection-change="tapSelect"
      no-filtered-userFrom-text="暂无筛选结果"
      :loading="loading"
      highlight-row
    >
      <template slot-scope="{ row }" slot="imgs">
        <img
          v-lazy="row.logo"
          :src="row.logo"
          v-image-preview
          style="max-height: 35px; cursor: pointer"
        />
      </template>

      <template slot-scope="{ row }" slot="status">
        <el-tag v-if="row.status == 1">开启</el-tag>
        <el-tag type="info" v-else>关闭</el-tag>
      </template>

      <template slot-scope="{ row }" slot="status2">
        <el-tag v-if="row.is_home == 1">显示</el-tag>
        <el-tag type="info" v-else>关闭</el-tag>
      </template>

      <template slot-scope="{ row }" slot="action">
        <a @click="tapEdit(row.id)">查看</a>
      </template>

      <template slot-scope="{ row }" slot="img">
        <el-avatar icon="el-icon-user-solid" :src="row.img"></el-avatar>
      </template>

      <!-- <template slot-scope="{ row, index }" slot="qrcode">
        <div @click="tapQrcode(index)" style="cursor: pointer">
          <div :id="'qrcode_' + row.id" style="width: 80px; height: 80px"></div>
        </div>
      </template> -->
    </Table>

    <div class="acea-row row-right page">
      <Page
        :total="page.count"
        show-elevator
        show-total
        @on-change="tapPage"
        :page-size="page.pageSize"
      />
    </div>
    <!-- </Card> -->

    <Modal
      v-model="dialogVisible"
      :title="title"
      @on-cancel="editClose"
      width="50%"
    >
      <el-form ref="form" :model="form" label-width="120px">
        <Row :gutter="24">
          <Col span="12">
            <el-form-item
              label="商户名称"
              prop="name"
              :rules="[{ required: true, message: '请输入商户名称' }]"
            >
              <el-input
                placeholder="请输入商户名称"
                autocomplete="off"
                v-model="form.name"
              ></el-input>
            </el-form-item>
          </Col>
          <Col span="12">
            <el-form-item
              label="商户类型"
              prop="type_name"
              :rules="[{ required: true, message: '请选择商户类型' }]"
            >
              <el-select
                v-model="form.type_name"
                clearable
                placeholder="商户类型"
                style="width: 100%"
              >
                <el-option
                  label="机关事业单位"
                  value="机关事业单位"
                ></el-option>
                <el-option
                  label="餐饮有限公司"
                  value="餐饮有限公司"
                ></el-option>
                <el-option label="企业食堂" value="企业食堂"></el-option>
                <el-option label="文化礼堂" value="文化礼堂"></el-option>
                <el-option label="个体工商户" value="个体工商户"></el-option>
                <el-option label="其他" value="其他"></el-option>
              </el-select>
            </el-form-item>
          </Col>
        </Row>

        <Row :gutter="24">
          <Col span="12">
            <el-form-item label="营业执照名称" prop="business_code">
              <el-input
                placeholder="请输入营业执照名称"
                autocomplete="off"
                v-model="form.business_code"
              ></el-input>
            </el-form-item>
          </Col>
          <Col span="12">
            <el-form-item label="组织机构代码" prop="organization">
              <el-input
                placeholder="请输入组织机构代码"
                autocomplete="off"
                v-model="form.organization"
              ></el-input>
            </el-form-item>
          </Col>
        </Row>

        <Row :gutter="24">
          <Col span="12">
            <el-form-item
              label="规模类型"
              prop="type_scale"
              :rules="[{ required: true, message: '请选择规模类型' }]"
            >
              <el-select
                @change="tapCkTime"
                v-model="form.type_scale"
                clearable
                placeholder="规模类型"
                style="width: 100%"
              >
                <el-option label="大型" value="大型"></el-option>
                <el-option label="中型" value="中型"></el-option>
                <el-option label="小型" value="小型"></el-option>
              </el-select>
            </el-form-item>
          </Col>
          <Col span="12">
            <el-form-item
              label="所属中队"
              prop="bumen_id"
              :rules="[{ required: true, message: '请输入所属中队' }]"
            >
              <el-select
                v-model="form.bumen_id"
                clearable
                placeholder="上一级"
                style="width: 100%"
              >
                <el-option
                  :label="item.html + item.name"
                  :value="item.id"
                  :key="item.id"
                  v-for="item in bumenAr"
                ></el-option>
              </el-select>
            </el-form-item>
          </Col>
        </Row>

        <Row :gutter="24" style="display: none">
          <Col span="12">
            <el-form-item label="商户主图">
              <ui-upload
                :upUrl="upUrl"
                :img="form.logo"
                fileName="上传店门"
                :headers="upHeaders"
                @onUpload="handleLogo"
                @onDelete="handleLogoDel"
              ></ui-upload>
              <el-tag
                >只能上传jpeg/png/gif文件，文件不能超过2MB，推荐尺寸400x400</el-tag
              >
            </el-form-item>
          </Col>
        </Row>

        <Row :gutter="24" style="display: none">
          <Col span="24">
            <el-form-item label="商户图：">
              <ui-upload-much
                :upUrl="upUrl"
                :img-ar="form.imgAr"
                :headers="upHeaders"
                @onUpload="onImgDesUpload"
                @onRemove="upImgDesRemove"
                @onLeft="onImgDescLeft"
                @onRight="onImgDescRight"
              ></ui-upload-much>
            </el-form-item>
          </Col>
        </Row>

        <Row :gutter="24">
          <Col span="12">
            <el-form-item label="法人信息">
              <el-input
                placeholder="请输入法人信息"
                autocomplete="off"
                v-model="form.fa_man"
              ></el-input>
            </el-form-item>
          </Col>

          <Col span="12">
            <el-form-item label="法人电话">
              <el-input
                placeholder="请输入法人电话"
                autocomplete="off"
                v-model="form.fa_tel"
              ></el-input>
            </el-form-item>
          </Col>
        </Row>

        <Row :gutter="24">
          <Col span="12">
            <el-form-item
              label="负责人姓名"
              prop="tel_man"
              :rules="[{ required: true, message: '请输入负责人姓名' }]"
            >
              <el-input
                placeholder="请输入负责人姓名"
                autocomplete="off"
                v-model="form.tel_man"
              ></el-input>
            </el-form-item>
          </Col>

          <Col span="12">
            <el-form-item
              label="负责人电话"
              prop="tel"
              :rules="[{ required: true, message: '请输入负责人电话' }]"
            >
              <el-input
                placeholder="请输入负责人电话"
                autocomplete="off"
                v-model="form.tel"
              ></el-input>
            </el-form-item>
          </Col>
        </Row>

        <Row :gutter="24" style="display: none">
          <Col span="12">
            <el-form-item label="营业时间">
              <el-input
                placeholder="请输入营业时间"
                autocomplete="off"
                v-model="form.business"
              ></el-input>
            </el-form-item>
          </Col>
        </Row>

        <Row :gutter="24" style="display: none">
          <Col :span="12">
            <el-form-item label="纬度">
              <el-input
                placeholder="纬度"
                autocomplete="off"
                v-model="form.lat"
              ></el-input>
            </el-form-item>
          </Col>

          <Col :span="12">
            <el-form-item label="经度">
              <el-input
                placeholder="经度"
                autocomplete="off"
                v-model="form.lng"
              ></el-input>
            </el-form-item>
          </Col>
        </Row>

        <Row :gutter="24">
          <Col span="24">
            <el-form-item label="商户地址">
              <el-input
                placeholder="请输入商户地址"
                autocomplete="off"
                v-model="form.address"
              ></el-input>
            </el-form-item>
          </Col>
        </Row>

        <Row style="display: none">
          <Col>
            <el-form-item label="获取信息">
              <a @click="tapMap" style="margin-top: 6px; display: block"
                >【获取信息】</a
              >
            </el-form-item>
          </Col>
        </Row>

        <Row :gutter="24" style="display: none">
          <Col :span="24">
            <el-form-item label="内容:">
              <vue-ueditor-wrap
                v-model="form.mono"
                @beforeInit="addCustomDialog"
                :config="myConfig"
                style="width: 95%"
              ></vue-ueditor-wrap>
            </el-form-item>
          </Col>
        </Row>

        <Row :gutter="24">
          <Col span="12">
            <el-form-item
              label="集烟罩数量"
              prop="tel_man"
              :rules="[{ required: true, message: '请输入集烟罩数量' }]"
            >
              <el-input
                placeholder="请输入集烟罩数量"
                autocomplete="off"
                v-model="form.range_count"
              ></el-input>
            </el-form-item>
          </Col>

          <Col span="12">
            <el-form-item
              label="净化设备数量"
              prop="tel_man"
              :rules="[{ required: true, message: '请输入净化设备数量' }]"
            >
              <el-input
                placeholder="请输入净化设备数量"
                autocomplete="off"
                v-model="form.purifier_count"
              ></el-input>
            </el-form-item>
          </Col>
        </Row>

        <el-row :space="24">
          <el-col :span="12">
            <el-form-item
              label="上次清洗时间"
              prop="sub_time"
              :rules="[{ required: true, message: '请输次清洗时间' }]"
            >
              <el-date-picker
                v-model="form.sub_time"
                @change="tapCkTime"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item
              label="下次清洗时间"
              prop="next_time"
              :rules="[{ required: true, message: '请输下次清洗时间' }]"
            >
              <el-date-picker
                v-model="form.next_time"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <Row :gutter="24">
          <Col span="12">
            <el-form-item label="清洁周期">
              <el-input
                placeholder="清洁周期，默认按规模来"
                @input="tapCkTime"
                v-model="form.qt_time"
              ></el-input>
            </el-form-item>
          </Col>

          <Col span="12">
            <el-form-item label="排序">
              <el-input
                placeholder="排序越高越前面"
                v-model="form.sort"
              ></el-input>
            </el-form-item>
          </Col>
        </Row>

        <Row :gutter="24">
          <Col span="12">
            <el-form-item label="是否显示">
              <el-radio-group v-model="form.status">
                <el-radio :label="1">显示</el-radio>
                <el-radio :label="0">隐藏</el-radio>
              </el-radio-group>
            </el-form-item>
          </Col>
        </Row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </Modal>

    <ui-map ref="map" @submit="tapSubMap"></ui-map>
    <!--申请删除-->
    <el-dialog
      :visible.sync="dialogVisiblesc"
      title="申请删除"
      :close-on-click-modal="false"
      width="680px"
    >
      <el-form :model="form" ref="form" label-width="100px">
        <el-row :space="24">
          <el-col :span="24">
            <el-form-item label="删除说明">
              <el-input
                type="textarea"
                :autosize="{ minRows: 6, maxRows: 8 }"
                placeholder="请输入删除说明"
                v-model="form.scsm"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer fx-r fx-ae">
        <el-button @click="dialogVisiblesc = false">取 消</el-button>
        <el-button type="primary" @click="tapDelfim(row)">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="'导入数据'"
      :visible.sync="dialogVisibleXls"
      width="500"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div style="margin: 5px 0">导入规则(按导出规则重新导入)</div>

      <div>
        <el-table :data="tempXls" border style="width: 100%" height="400">
          <el-table-column
            label="序"
            prop="index"
            width="55"
            align="center"
          ></el-table-column>

          <el-table-column
            label="辖区中队"
            prop="bumen_name"
            align="center"
            width="120"
          ></el-table-column>

          <el-table-column
            label="商户名称"
            prop="name"
            align="center"
            width="120"
          ></el-table-column>

          <el-table-column
            label="商户地址"
            prop="address"
            align="center"
            width="120"
          ></el-table-column>

          <el-table-column
            label="营业执照名称"
            prop="business_code"
            align="center"
            width="120"
          ></el-table-column>

          <el-table-column
            label="组织机构代码"
            prop="organization"
            align="center"
            width="120"
          ></el-table-column>

          <el-table-column
            label="法人姓名"
            prop="fa_man"
            align="center"
            width="120"
          ></el-table-column>

          <el-table-column
            label="法人联系手机"
            prop="fa_tel"
            align="center"
            width="120"
          ></el-table-column>

          <el-table-column
            label="负责人"
            prop="tel_man"
            align="center"
            width="120"
          ></el-table-column>

          <el-table-column
            label="联系电话"
            prop="tel"
            align="center"
            width="120"
          ></el-table-column>

          <el-table-column
            label="餐饮类别"
            prop="type_name"
            align="center"
            width="120"
          ></el-table-column>

          <el-table-column
            label="规模"
            prop="type_scale"
            align="center"
            width="120"
          ></el-table-column>

          <el-table-column
            label="集烟罩数量"
            prop="range_count"
            align="center"
            width="120"
          ></el-table-column>

          <el-table-column
            label="净化设备数量"
            prop="purifier_count"
            align="center"
            width="120"
          ></el-table-column>

          <el-table-column
            label="上次清洗时间"
            prop="sub_time"
            align="center"
            width="120"
          ></el-table-column>

          <el-table-column
            label="下次清洗时间"
            prop="next_time"
            align="center"
            width="120"
          ></el-table-column>

          <el-table-column
            label="清洁周期"
            prop="qt_time"
            align="center"
            width="120"
          ></el-table-column>

          <el-table-column
            label="状态"
            prop="type"
            align="center"
            width="100"
            fixed="right"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.status == -2">
                <div style="color: #0088cc">待确认</div>
              </div>

              <div v-if="scope.row.status == 0">
                <i class="el-icon-loading"></i>
              </div>

              <div v-if="scope.row.status == 1">
                <i class="el-icon-check" style="color: #00a0e8"></i>
              </div>

              <div v-if="scope.row.status == -1">
                <div style="color: red">{{ scope.row.error }}</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-form style="margin-top: 20px" :model="daoXls" label-width="80px">
        <el-form-item label="上传文件" prop="type">
          <div class="fx-r fx-bc">
            <el-upload
              ref="upload"
              action="/"
              :show-file-list="false"
              :on-change="importExcel"
              :auto-upload="false"
            >
              <el-button
                slot="trigger"
                icon="el-icon-update"
                size="small"
                type="primary"
                >上传XLS</el-button
              >
            </el-upload>
          </div>
        </el-form-item>
      </el-form>

      <span slot="footer" class="fx-r fx-bc fx-ac" v-if="isXlsType <= 1">
        <el-button @click="dialogVisibleXls = false" v-if="isXlsType == 0"
          >取 消</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-loading"
          v-if="isXlsType == 1"
          disabled
          >确 定</el-button
        >
        <el-button type="primary" v-if="isXlsType == 0" @click="tapUserDao"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="打开二维码"
      :visible.sync="dialogVisible3"
      width="200"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="fx-h fx-bc fx-ac">
        <div
          class="bqrcode"
          id="bqrcode"
          style="width: 400px; height: 400px"
        ></div>
        <div
          style="
            font-size: 28px;
            text-align: center;
            margin-top: 20px;
            font-weight: bold;
          "
        >
          {{ bind_name }}
        </div>
      </div>
    </el-dialog>

    <!--执行条数-->
    <div class="zx-pop fx-h fx-bc fx-ac" v-if="actionBool">
      <div class="bg"></div>
      <div class="body fx-h fx-bc fx-ac">
        {{ actionMsg }}
      </div>
    </div>
  </div>
</template>

<script>
import IPageHeader from '@/layouts/system/page-header/index'
import UiUpload from '@/ui/upload/index'
import Setting from '@/setting'
import { SystemArea } from '../../../api/system/pub'
import VueUeditorWrap from 'vue-ueditor-wrap'
import UiMap from '../../../ui/map/map'
import {
  SystemMerchantsDel,
  SystemMerchantsSqDel,
  SystemMerchantsclosedItem,
  SystemMerchantscolsedList,
  SystemMerchantsListAll,
  SystemMerchantsSave,
} from '../../../api/system/merchants'
import {
  export_json_to_excel,
  export_read_to_excel,
} from '../../../libs/Export2Excel'
import UiUploadMuch from '../../../ui/upload/more_index'
import { SystemBumenClassTree } from '../../../api/system/bumen'
import dayjs from 'dayjs'
import QRCode from 'qrcodejs2' // 引入qrcode
let actionData = []
export default {
  name: 'merchants_index',
  components: { UiUploadMuch, UiMap, UiUpload, IPageHeader, VueUeditorWrap },
  computed: {},
  data() {
    return {
      title: '商户管理',
      dialogVisible: false,
      upHeaders: {},
      upUrl: '',
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },
      elShow: false,
      columns1: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
        },
        {
          title: 'ID',
          key: 'id',
          minWidth: 150,
          align: 'center',
        },
        {
          title: '商户id',
          key: 'old_id',

          minWidth: 100,
        },
        {
          title: '商户名称',
          key: 'name',
          minWidth: 150,
          align: 'center',
        },
        {
          title: '地址信息',
          key: 'address',
          minWidth: 300,
        },
        {
          title: '商户类型',
          key: 'type_name',
          minWidth: 100,
        },
        {
          title: '联系电话',
          key: 'tel',
          minWidth: 100,
        },
        {
          title: '联系人',
          key: 'tel_man',
          minWidth: 100,
        },
        {
          title: '规模类型',
          key: 'type_scale',
          minWidth: 100,
        },

        {
          title: '营业执照',
          key: 'business_code',
          minWidth: 100,
        },

        {
          title: '组织机构代码',
          key: 'organization',
          width: 160,
          align: 'center',
        },

        {
          title: '归属中队',
          key: 'bumen_name',
          minWidth: 100,
        },

        {
          title: '集烟罩数量',
          key: 'range_count',
          minWidth: 100,
        },

        {
          title: '净化设备数量',
          key: 'purifier_count',
          minWidth: 100,
        },
        {
          title: '法人代表',
          key: 'fa_man',
          minWidth: 100,
        },
        {
          title: '法人电话',
          key: 'fa_tel',
          minWidth: 100,
        },

        {
          title: '发布时间',
          key: 'time',
          minWidth: 120,
        },
        {
          title: '周期清洗',
          key: 'qt_time',
          minWidth: 120,
        },

        {
          title: '排序',
          key: 'sort',
          width: 80,
        },

        {
          title: '上次清洁',
          key: 'sub_time',
          width: 100,
          fixed: 'right',
        },

        {
          title: '闭店时间',
          key: 'del_time',
          width: 80,
          fixed: 'right',
        },
        {
          title: '闭店说明',
          key: 'scsm',
          width: 180,
          fixed: 'right',
        },
        {
          title: '操作',
          key: 'action',
          slot: 'action',
          fixed: 'right',
          minWidth: 100,
        },
      ],
      bumenAr: [],
      loading: true,
      tableData: [],
      page: {
        count: 0, //一共多少数量
        pageSize: 0, //每一页码数量
        page: 1, //当前页码
      },
      formValidate: { title: '' },
      areaAr: [],
      form: {
        name: '',
        region_id: 0,
        logo: '',
        tel: '',
        tel_man: '',
        business: '',
        lat: '',
        lng: '',
        address: '',
        sort: 0,
        status: 0,
        imgAr: [],
      },
      myConfig: {
        autoHeightEnabled: false, // 编辑器不自动被内容撑高
        initialFrameHeight: 200, // 初始容器高度
        initialFrameWidth: '100%', // 初始容器宽度
        UEDITOR_HOME_URL: Setting.apiBaseURL + '/UEditor/',
        serverUrl: '',
      },
      dialogVisibleXls: false,
      tempXls: [],
      daoXls: {},
      isXlsType: -1,
      dialogVisible3: false,
      dialogVisiblesc: false,
      bind_name: '',
      actionBool: false,
      actionIndex: 0,
      actionMsg: '',
      flag: false,
    }
  },
  mounted() {
    var upHeaders = {}
    this.upUrl = Setting.apiBaseURL + '/systemv1/upload/index'
    const token = this.$utils.util.cookies.get('system_token')
    if (token) {
      upHeaders['SYSTEM-ACC-TOKEN'] = token
    }
    this.upHeaders = upHeaders
    this.initView()
  },
  methods: {
    initView: function () {
      this.formValidate.type_name = this.$route.query.type_name || ''
      this.formValidate.bumen_id = this.$route.query.bumen_id || ''

      SystemBumenClassTree().then((res) => {
        if (res.code == 200) {
          this.bumenAr = res.data
        }
      })
      this.getData()
    },
    /**
     * 获取数据
     */
    getData: function () {
      SystemMerchantscolsedList({
        page: this.page.page,
        keyword: this.formValidate.title,
        type: this.formValidate.state,
        issecurities: this.formValidate.issecurities,
        type_name: this.formValidate.type_name,
        bumen_id: this.formValidate.bumen_id,
        type_scale: this.formValidate.type_scale,
        tel: this.formValidate.tel,
        address: this.formValidate.address,
        timeVal: this.formValidate.timeVal,
      })
        .then((res) => {
          this.loading = false
          this.$utils.loadingClose()
          if (res.code == 200) {
            this.tableData = res.data.list
            this.flag = res.data.flag
            this.page.pageSize = res.data.pageSize
            this.page.count = res.data.pageCount
            // this.makeQrocde()
          } else {
            this.$alert(res.msg)
          }
        })
        .catch((err) => {
          console.log(err)
          this.loading = false
          this.$utils.loadingClose()
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },
    userSearchs() {
      this.page.page = 1
      this.loading = true
      this.getData()
    },

    tapEl2: function (index) {
      this.headrIndex2 = index
      this.page.page = 1
      this.loading = true
      this.getData()
    },
    //关闭
    editClose: function () {
      this.dialogVisible = false
    },
    /**
     * 添加广告栏目
     */
    tapAdd: function (sassid) {
      this.dialogVisible = true
      this.$refs['form'].resetFields()
      this.form = this.$utils.resetFields(this.form, {
        name: '',
        region_id: 0,
        logo: '',
        tel: '',
        tel_man: '',
        business: '',
        lat: '',
        lng: '',
        address: '',
        sort: 0,
        status: 0,
        imgAr: [],
      })
    },
    /**
     * 修改分页
     */
    tapEdit: function (id) {
      this.$utils.loading(this, '获取数据中...')
      SystemMerchantsclosedItem({ id: id })
        .then((res) => {
          this.$utils.loadingClose()
          if (res.code == 200) {
            this.form = res.data
            this.dialogVisible = true
            this.title = '修改商户'
          } else {
            this.$alert(res.msg)
          }
        })
        .catch((err) => {
          this.$utils.loadingClose()
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },
    /**
     * 分页
     */
    tapPage: function (index) {
      this.page.page = index
      this.getData()
    },
    /**
     * 修改数据
     */
    subAdmin: function () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let loading = this.$loading('提交数据中...')
          SystemMerchantsSave(this.form)
            .then((res) => {
              loading.close()
              if (res.code == 200) {
                this.dialogVisible = false
                this.$Message.success('操作成功')
                this.getData()
              } else {
                this.$alert(res.msg, '系统提示')
              }
            })
            .catch((err) => {
              loading.close()
              this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
            })
        }
      })
    },
    /**
     * 上传文件
     * @param res
     */
    onUpload: function (res) {
      if (res.code == -1) {
        Notice.error({ title: '系统提示', content: res.msg })
      } else {
        this.form.img = res.data.img
      }
    },
    /**
     * 申请删除操作
     */
    tapsc: function (item) {
      this.dialogVisiblesc = true
      this.form = {
        m_id: item.id,
        time: '',
        scsm: '',
      }
    },
    // 申请删除
    tapDelfim() {
      if (this.form.scsm == '') {
        this.$alert('请输入删除说明')
        return
      }
      this.$confirm('此操作将申请删除商户信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$utils.loading(this, '申请删除数据中...')
        SystemMerchantsSqDel({ id: this.form.m_id, scsm: this.form.scsm })
          .then((res) => {
            this.$utils.loadingClose()
            this.loading = true
            if (res.code == 200) {
              this.dialogVisiblesc = false
              this.getData()
            } else {
              this.$alert(res.msg)
            }
          })
          .catch((err) => {
            this.$utils.loadingClose()
            this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
          })
      })
    },
    // 删除
    tapDel(row) {
      this.$confirm('此操作将删除商户信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$utils.loading(this, '删除数据中...')
        SystemMerchantsDel({ id: row.id })
          .then((res) => {
            this.$utils.loadingClose()
            this.loading = true
            if (res.code == 200) {
              this.getData()
            } else {
              this.$alert(res.msg)
            }
          })
          .catch((err) => {
            this.$utils.loadingClose()
            this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
          })
      })
    },

    /**
     * 上传logo
     */
    handleLogo: function (res) {
      console.log(res)
      if (res.code == -1) {
        this.$Notice.error({ title: '系统提示', content: res.msg })
      } else {
        this.$set(this.form, 'logo', res.data.img)
      }
    },

    handleLogoDel: function () {
      this.$set(this.form, 'logo', '')
    },
    /**
     * 地图
     */
    tapMap: function () {
      this.$refs.map.showMap({
        address: this.form.address,
        lng: this.form.lng,
        lat: this.form.lat,
      })
    },

    /**
     * 选择地图
     */
    tapSubMap: function (item) {
      this.form.address = item.address
      this.form.lng = item.longitude
      this.form.lat = item.latitude
      console.log(item)
    },
    /**
     *
     */
    onImgDesUpload: function (res) {
      if (res.code == -1) {
        Notice.error({ title: '系统提示', content: res.msg })
      } else {
        this.form.imgAr.push(res.data.img)
      }
    },

    /**
     * 删除图片
     * @param index
     */
    upImgDesRemove: function (index) {
      this.form.imgAr.splice(index, 1)
    },

    /**
     * left
     */
    onImgDescLeft: function (index) {
      if (index == 0) return
      var data = this.form.imgAr[index]
      var udata = this.form.imgAr[index - 1]
      this.$set(this.form.imgAr, index, udata)
      this.$set(this.form.imgAr, index - 1, data)
    },
    /**
     *
     */
    onImgDescRight: function (index) {
      if (index + 1 >= this.form.imgAr.length) return
      var data = this.form.imgAr[index]
      var udata = this.form.imgAr[index + 1]
      this.$set(this.form.imgAr, index, udata)
      this.$set(this.form.imgAr, index + 1, data)
    },

    addCustomDialog: function (editorId) {
      window.UE.registerUI(
        'test-dialog',
        function (editor, uiName) {
          // 创建 dialog
          let dialog = new window.UE.ui.Dialog({
            iframeUrl: '/system/widget/images/index.html?fodder=dialog',
            editor: editor,
            name: uiName,
            title: '上传图片',
            cssRules: 'width:600px;height:500px;padding:20px;',
          })
          this.dialog = dialog
          let btn = new window.UE.ui.Button({
            name: 'dialog-button',
            title: '上传图片',
            cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -726px -77px;`,
            onclick: function () {
              // 渲染dialog
              dialog.render()
              dialog.open()
            },
          })
          return btn
        },
        37
      )
    },

    tapSelect: function (data) {
      actionData = data
    },

    /**
     * 确认申请删除数据
     */
    tapAllDelSQ: function () {
      if (actionData.length <= 0) {
        this.$alert('请选择申请栏目，在进行')
        return
      }
      //
      this.$confirm('确认批量申请删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.actionIndex = 0
          this.actionBool = true
          this.actionBillSq()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    /**
     * 确认数据
     */
    tapAllDel: function () {
      if (actionData.length <= 0) {
        this.$alert('请选择删除栏目，在进行')
        return
      }
      //
      this.$confirm('确认批量删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.actionIndex = 0
          this.actionBool = true
          this.actionBill()
        })
        .catch((err) => {
          console.log(err)
        })
    },

    /**
     * 执行数据
     */
    actionBill: function () {
      this.actionMsg =
        '执行数据...' + this.actionIndex + '/' + actionData.length
      if (this.actionIndex >= actionData.length) {
        this.actionBool = false
        this.getData()
        return
      }
      let data = actionData[this.actionIndex]
      let sub = {
        id: data.id,
      }

      SystemMerchantsDel(sub)
        .then((res) => {
          if (res.code == 200) {
            this.actionIndex++
            this.actionBill()
          } else {
            this.actionBool = false
            this.$alert(res.msg)
          }
        })
        .catch((err) => {
          this.$utils.loadingClose()
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },

    /**
     * 执行数据
     */
    actionBillSq: function () {
      this.actionMsg =
        '执行数据...' + this.actionIndex + '/' + actionData.length
      if (this.actionIndex >= actionData.length) {
        this.actionBool = false
        this.getData()
        return
      }
      let data = actionData[this.actionIndex]
      let sub = {
        id: data.id,
      }

      SystemMerchantsSqDel(sub)
        .then((res) => {
          if (res.code == 200) {
            this.actionIndex++
            this.actionBillSq()
          } else {
            this.actionBool = false
            this.$alert(res.msg)
          }
        })
        .catch((err) => {
          this.$utils.loadingClose()
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },

    /**
     * 导入
     */
    exports_ok: function () {
      this.dialogVisibleXls = true
      this.tempXls = []
      this.isXlsType = 0
      this.exportsType = 1
    },

    /**
     * 导入XLS
     */
    importExcel: function (file) {
      const file_types = file.name.split('.')
      let types = file_types[file_types.length - 1]
      const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv'].some(
        (item) => item === types
      )
      if (!fileType) {
        this.$alert('请上传xls文件！', '系统提示')
        return false
      }
      export_read_to_excel(file).then((res) => {
        var data = res[0].sheet
        console.log(data)
        var tAr = []
        for (var i in data) {
          var d = {}
          d.index = parseInt(i) + 1
          d.bumen_name = data[i]['辖区中队']
          d.name = data[i]['主体名称（店招名称\\企业名称）']
          d.business_code = data[i]['营业执照名称']
          d.organization = data[i]['组织机构代码']
          d.fa_man = data[i]['法人姓名']
          d.fa_tel = data[i]['法人联系手机']
          d.tel = data[i]['油烟管理人员联系手机']
          d.tel_man = data[i]['油烟管理人姓名']
          d.type_name = data[i]['餐饮类别']
          d.type_scale = data[i]['规模（清洗频次）']
          d.range_count = data[i]['油烟机数量']
          d.purifier_count = data[i]['油烟净化设备数量']
          d.qt_time = data[i]['清洁周期（天）']
          d.address = data[i]['街道\\乡镇'] + data[i]['具体地址']
          d.sub_time = data[i]['上次清洗时间'].replace(/\./g, '-')
          d.next_time = ''

          let type_scale = d.type_scale

          if (
            d.sub_time != '' &&
            (type_scale == '小型' || type_scale == '小')
          ) {
            d.next_time = dayjs(d.sub_time)
              .add('3', 'month')
              .format('YYYY-MM-DD')
            type_scale = '小型'
          }
          if (
            d.sub_time != '' &&
            (type_scale == '中型' || type_scale == '中')
          ) {
            d.next_time = dayjs(d.sub_time)
              .add('2', 'month')
              .format('YYYY-MM-DD')
            type_scale = '中型'
          }

          if (
            d.sub_time != '' &&
            (type_scale == '大型' || type_scale == '大')
          ) {
            d.next_time = dayjs(d.sub_time)
              .add('1', 'month')
              .format('YYYY-MM-DD')
            type_scale = '大型'
          }
          if (d.qt_time != '') {
            d.next_time = dayjs(d.sub_time)
              .add(d.qt_time, 'day')
              .format('YYYY-MM-DD')
          }

          d.type_scale = type_scale

          d.error = ''
          d.status = -2
          if (d.id != '') tAr.push(d)
        }
        if (tAr.length > 0) {
          this.tempXls = tAr
        } else {
          this.$alert('导入数据错误，请重新导入!', '系统提示')
        }
      })
    },

    tapUserDao: function () {
      if (this.tempXls.length <= 0) {
        return this.$alert('请导入数据，在操作!', '系统提示')
      }
      this.isXlsType = 2
      for (var i in this.tempXls) {
        this.tempXls[i].status = 0
      }
      this.daorZc()
    },
    //注册数据
    daorZc: function () {
      var index = -1
      for (var i in this.tempXls) {
        if (this.tempXls[i].status == 0) {
          index = i
          break
        }
      }
      if (index == -1) {
        this.$alert('执行完毕！', '操作成功')
        this.initView()
        return
      }
      var data = this.tempXls[index]
      if (data.type == '正式党员') {
        data.type = 1
      } else {
        data.type = 0
      }

      SystemMerchantsSave({
        ...data,
        status: 1,
        is_xls: 1,
      })
        .then((res) => {
          if (res.code == 200) {
            data.status = 1
          } else {
            data.status = -1
            data.error = res.msg
          }
          this.daorZc()
        })
        .catch((res) => {
          data.error = '网络繁忙，请重新导入'
          data.status = -1
          this.$set(this.tempXls, index, data)
          this.daorZc()
        })
    },

    tapCkTime: function () {
      let type_scale = this.form.type_scale
      let sub_time = this.form.sub_time
      if (sub_time == null) return
      let qt_time = this.form.qt_time

      if (this.$utils.isDefine(qt_time)) {
        this.form.next_time = dayjs(sub_time)
          .add(qt_time, 'day')
          .format('YYYY-MM-DD')
        this.$forceUpdate()
      } else {
        if (type_scale == '小型') {
          this.form.next_time = dayjs(sub_time)
            .add('3', 'month')
            .format('YYYY-MM-DD')
          this.$forceUpdate()
        }

        if (type_scale == '中型') {
          this.form.next_time = dayjs(sub_time)
            .add('2', 'month')
            .format('YYYY-MM-DD')
          this.$forceUpdate()
        }

        if (type_scale == '大型') {
          this.form.next_time = dayjs(sub_time)
            .add('1', 'month')
            .format('YYYY-MM-DD')
          this.$forceUpdate()
        }
      }
    },

    // 导出
    exports(index) {
      this.$utils.loading(this, '获取数据中...')
      SystemMerchantsListAll({
        keyword: this.formValidate.title,
        type: this.formValidate.state,
        issecurities: this.formValidate.issecurities,
        type_name: this.formValidate.type_name,
        type_scale: this.formValidate.type_scale,
        tel: this.formValidate.tel,
      })
        .then((res) => {
          this.$utils.loadingClose()
          if (res.code == 200) {
            import('@/libs/Export2Excel').then((excel) => {
              const tHeader = [
                '商户名称',
                '商户类型',
                '规模类型',
                '营业执照',
                '组织机构代码',
                '归属中队',
                '集烟罩数量',
                '净化设备数量',
                '法人代表',
                '联系电话',
                '法人电话',
                '联系人',
                '地址信息',
                '导入时间',
                '上次清洁',
                '下次清洁',
              ]
              const filterVal = [
                'name',
                'type_name',
                'type_scale',
                'business_code',
                'organization',
                'bumen_name',
                'range_count',
                'purifier_count',
                'fa_man',
                'fa_tel',
                'tel',
                'tel_man',
                'address',
                'time',
                'sub_time',
                'next_time',
              ]
              var data = this.formatJson(filterVal, res.data)
              var filename = '商户信息'
              export_json_to_excel({
                header: tHeader,
                data,
                filename,
              })
            })
          } else {
            this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
          }
        })
        .catch((err) => {})
    },
    /**
     *  格式数据
     *  @filterVal  格式头
     *  @tableData  用来格式的表格数据
     */
    formatJson(filterVal, tableData) {
      return tableData.map((v) => {
        return filterVal.map((j) => {
          return v[j]
        })
      })
    },

    makeQrocde: function () {
      setTimeout(() => {
        for (var i in this.tableData) {
          document.getElementById('qrcode_' + this.tableData[i].id).innerHTML =
            ''

          let qrcode = new QRCode('qrcode_' + this.tableData[i].id, {
            width: 80,
            height: 80,
            text: this.tableData[i].qrcode,
          })
        }
      }, 200)
    },
    tapQrcode: function (i) {
      this.dialogVisible3 = true
      this.bind_name = this.tableData[i].name
      setTimeout(() => {
        document.getElementById('bqrcode').innerHTML = ''
        let qrcode = new QRCode('bqrcode', {
          width: 400,
          height: 400,
          text: this.tableData[i].qrcode,
        })
      }, 200)
    },
  },
}
</script>
<style scoped>
.platform-img {
  width: 20px;
  height: 20px;
  background: #f2f2f2;
  margin-right: 4px;
}
.platform-img img {
  width: 100%;
}

.zx-pop {
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 999;
}
.zx-pop .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
}
.zx-pop .body {
  background: #fff;
  width: 250px;
  height: 80px;
  border-radius: 10px;
  position: relative;
  z-index: 1;
}
</style>
